<template>
  <div class="login-from">
    <div class="login-from-info">
      <div style="display: flex; justify-content: center">
        <img src="@/assets/logo.svg" style="margin-right: 10px" />
        <h2>{{ $t('login.title') }}</h2>
      </div>
      <el-form ref="ruleFormRef" :model="ruleForm" status-icon :rules="rules" label-position="top" label-width="auto" size="large">
        <el-form-item :label="$t('login.account')" prop="account">
          <el-input v-model="ruleForm.account" type="account" autocomplete="off" placeholder="admin or test" />
        </el-form-item>
        <el-form-item :label="$t('login.password')" prop="password">
          <el-input v-model="ruleForm.password" type="password" autocomplete="off" show-password placeholder="Please input password" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm(ruleFormRef)" style="width: 100%" :loading="loading">{{ $t('login.login') }}</el-button>
        </el-form-item>
        <el-divider content-position="center">{{ $t('login.otherLogins') }}</el-divider>
        <div style="width: 100%; display: flex; align-items: center; justify-content: space-evenly">
          <el-button type="primary" @click="getOtherLogins(ruleFormRef, 'admin')" size="small" :loading="loading">{{ $t('login.admin') }}</el-button>
          <el-button type="primary" @click="getOtherLogins(ruleFormRef, 'test')" size="small" :loading="loading">{{ $t('login.test') }}</el-button>
        </div>
      </el-form>
    </div>
    <!-- <div class="maoboli"></div> -->
  </div>
</template>

<script lang="ts" setup>
  import { reactive, ref } from 'vue'
  import type { FormInstance, FormRules } from 'element-plus'
  import { useRouter } from 'vue-router'
  import { useAppStore } from '@/stores/modules/app'
  import { sysUserLogin } from '@/api/sysUser'
  const useApp = useAppStore()
  const ruleFormRef = ref<FormInstance>()
  const loading = ref<boolean>(false)
  const validateAccount = (rule: any, value: any, callback: any) => {
    if (value === '') {
      callback(new Error('请输入账号'))
    } else {
      callback()
    }
  }
  const validatePass = (rule: any, value: any, callback: any) => {
    if (value === '') {
      callback(new Error('请输入密码'))
    } else {
      if (ruleForm.password !== '') {
        if (!ruleFormRef.value) return
      }
      callback()
    }
  }
  const router = useRouter()

  const ruleForm = reactive({
    account: 'admin',
    password: '123456',
  })

  const rules = reactive<FormRules<typeof ruleForm>>({
    account: [{ validator: validateAccount, trigger: 'blur' }],
    password: [{ validator: validatePass, trigger: 'blur' }],
  })

  const submitForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.validate((valid) => {
      if (valid) {
        loading.value = true
        sysUserLogin(ruleForm).then((res) => {
          if (res.data) {
            useApp.setToken(res.data)
            sessionStorage.setItem('token', res.data)
            router.push('/')
          }
          loading.value = false
        })
      } else {
        console.log('error submit!')
        return false
      }
    })
  }
  const getOtherLogins = (formEl: FormInstance | undefined, account: string) => {
    ruleForm.account = account
    ruleForm.password = '123456'
    submitForm(formEl)
  }
</script>

<style scoped lang="scss">
  .login-from {
    transform: translateY(-5px) scale(1.01);
    position: relative;
    &-info {
      border: 1px solid var(--el-border-color);
      padding: 20px;
      border-radius: 10px;
      // backdrop-filter: saturate(100%) blur(5px);
      box-shadow: 0 12px 12px 0 rgba(0, 0, 0, 0.1);
      background-color: var(--el-bg-color);
    }
    // TODO: 暂时取消
    // .maoboli::after {
    //   width: 100px;
    //   height: 100px;
    //   content: '';
    //   background: skyblue;
    //   z-index: -2;
    //   position: absolute;
    //   left: -50px;
    //   top: -50px;
    //   border-radius: 10%;
    //   animation: animate 5s linear infinite;
    // }
    // @keyframes animate {
    //   0%,
    //   100% {
    //     transform: translateY(-40px);
    //   }
    //   50% {
    //     transform: translateY(40px);
    //   }
    // }
  }
</style>
